<template>
  <div class="home">
    <h1>行程调查表</h1>
    <el-form :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="心愿">
        <el-input v-model="form.msg" />
      </el-form-item>
      <el-form-item label="头像">
        <el-radio-group v-model="form.url">
          <el-radio label="jingtian.jpeg">
            <img src="../assets/img/jingtian.jpeg" alt="" />
          </el-radio>
          <el-radio label="tangyan.jpeg">
            <img src="../assets/img/tangyan.jpeg" alt="" />
          </el-radio>
          <el-radio label="yifei.jpeg">
            <img src="../assets/img/yifei.jpeg" alt="" />
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <!-- require 引入本地的图片 -->
    <el-table :data="tableData" style="width: 100%" @selection-change="check">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="url" label="头像">
        <template #default="{ row }">
          <img :src="require(`../assets/img/${row.url}`)" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="time" label="日期" />
      <el-table-column prop="msg" label="愿望" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="{ $index }">
          <el-button text size="small" @click="delect($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="delAll">批量删除</el-button>
    <span>选中的数量：{{ checkVal.length }}</span>
  </div>
</template>

<script>
// @ is an alias to /src
import { reactive, computed, ref } from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "HomeView",
  components: {},
  setup(props) {
    const { commit, state } = useStore();
    const form = reactive({
      name: "",
      msg: "",
      url: "",
    });
    const checkVal = ref([]);
    const tableData = computed(() => state.list);
    const onSubmit = () => {
      // 创建的函数
      // console.log(form);
      commit("saveList", form);
      form.name = "";
      form.msg = "";
      form.url = "";
    };
    const check = (val) => {
      // val 选中的数组
      // 选中事件
      checkVal.value = val;
    };
    const delect = (i) => {
      // 单个删除的函数
      ElMessageBox.confirm("是否确定要删除该数据！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          commit("del", i);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除！",
          });
        });
    };
    const delAll = () => {
      // 批量删除；
      commit("delectAll", checkVal.value);
    };
    return {
      form,
      onSubmit,
      tableData,
      check,
      checkVal,
      delect,
      delAll,
    };
  },
};

// let arr = [1, 2, 3, 4, 5];
// let arr1 = [3, 4, 5];
// // let arr2 = [];
// // arr.forEach((item) => {
// //   // console.log();
// //   if (!arr1.some((n) => n == item)) {
// //     arr2.push(item);
// //   }
// // });
// // console.log(arr2);
// // console.log(arr2);
// // let arr2 = arr.filter((item) => !arr1.some((n) => item == n));
// let arr2 = arr.filter((item) => arr1.every((n) => item !== n));
// console.log(arr2);

// let arr = [{ name: "张三" }, { name: "李四" }];
// console.log(arr.includes("张三"));
</script>
<style lang="scss" scoped>
.home {
  width: 70%;
  margin: 50px auto;
  text-align: center;
}
section {
  display: flex;
  justify-content: space-around;
}
img {
  width: 40px;
  height: 40px;
}
</style>
